<!DOCTYPE html>
<html lang=zh>
<head><meta name="generator" content="Hexo 3.9.0">
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="前言HTML5 为我们提供了一种通过 File API 规范与本地文件交互的标准方式。虽然也用过很多次了，但是一直不是很系统，今天参考别人的博客系统总结下。File API提供了多种文件访问的接口：  File，独立文件，提供文件的只读信息，比如名称，文件大小，minetype以及文件的引用 FileList，文件对象的类数组序列，上传文件时选择多个文件或者拖拽上传拖拽多个文件的时候会有用到 Bl">
<meta name="keywords" content="default">
<meta property="og:type" content="article">
<meta property="og:title" content="Html5 File API详解[转载]">
<meta property="og:url" content="https://andyliwr.github.io/2018/12/08/html5_file_api/index.html">
<meta property="og:site_name" content="月光倾城的代码小屋">
<meta property="og:description" content="前言HTML5 为我们提供了一种通过 File API 规范与本地文件交互的标准方式。虽然也用过很多次了，但是一直不是很系统，今天参考别人的博客系统总结下。File API提供了多种文件访问的接口：  File，独立文件，提供文件的只读信息，比如名称，文件大小，minetype以及文件的引用 FileList，文件对象的类数组序列，上传文件时选择多个文件或者拖拽上传拖拽多个文件的时候会有用到 Bl">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://img.vim-cn.com/59/d7f8814d0f67906eee5ab7c3e0a2ee00bb2f26.jpg">
<meta property="og:updated_time" content="2018-12-08T16:46:19.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Html5 File API详解[转载]">
<meta name="twitter:description" content="前言HTML5 为我们提供了一种通过 File API 规范与本地文件交互的标准方式。虽然也用过很多次了，但是一直不是很系统，今天参考别人的博客系统总结下。File API提供了多种文件访问的接口：  File，独立文件，提供文件的只读信息，比如名称，文件大小，minetype以及文件的引用 FileList，文件对象的类数组序列，上传文件时选择多个文件或者拖拽上传拖拽多个文件的时候会有用到 Bl">
<meta name="twitter:image" content="https://img.vim-cn.com/59/d7f8814d0f67906eee5ab7c3e0a2ee00bb2f26.jpg">
    
    
        
          
              <link rel="shortcut icon" href="/images/favicon.ico">
          
        
        
          
            <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
          
        
        
          
            <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
          
        
    
    <!-- title -->
    <title>Html5 File API详解[转载]</title>
    <!-- styles -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- persian styles -->
    
      <link rel="stylesheet" href="/css/rtl.css">
    
    <!-- rss -->
    
    
</head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/search/">搜索</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/others/">其他文章</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2019/01/17/vue_cli_v3_config_setting/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" href="/2018/12/08/sortable_js/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">上一篇</span>
      <span id="i-next" class="info" style="display:none;">下一篇</span>
      <span id="i-top" class="info" style="display:none;">返回顶部</span>
      <span id="i-share" class="info" style="display:none;">分享文章</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=https://andyliwr.github.io/2018/12/08/html5_file_api/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&text=Html5 File API详解[转载]"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&is_video=false&description=Html5 File API详解[转载]"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=Html5 File API详解[转载]&body=Check out this article: https://andyliwr.github.io/2018/12/08/html5_file_api/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&name=Html5 File API详解[转载]&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#前言"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#检查你的浏览器是否支持-File-API"><span class="toc-number">2.</span> <span class="toc-text">检查你的浏览器是否支持 File API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#选择文件"><span class="toc-number">3.</span> <span class="toc-text">选择文件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#使用表单输入选择"><span class="toc-number">3.1.</span> <span class="toc-text">使用表单输入选择</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#使用拖拽操作选择"><span class="toc-number">3.2.</span> <span class="toc-text">使用拖拽操作选择</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#FileReader"><span class="toc-number">4.</span> <span class="toc-text">FileReader</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#文件分割以及监控文件读取进度"><span class="toc-number">4.1.</span> <span class="toc-text">文件分割以及监控文件读取进度</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#结束"><span class="toc-number">5.</span> <span class="toc-text">结束</span></a></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        Html5 File API详解[转载]
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">月光倾城的代码小屋</span>
      </span>
      
    <div class="postdate">
        <time datetime="2018-12-08T16:46:19.000Z" itemprop="datePublished">2018-12-08</time>
    </div>


      

      
    <div class="article-tag">
        <i class="fas fa-tag"></i>
        <a class="tag-link" href="/tags/default/">default</a>
    </div>


    </div>
  </header>
  
<div class="article-gallery">
    
    <a class="gallery-item" href="https://img.vim-cn.com/59/d7f8814d0f67906eee5ab7c3e0a2ee00bb2f26.jpg" rel="gallery_ck5exevqf0013ayojez2mu208">
        <img src="https://img.vim-cn.com/59/d7f8814d0f67906eee5ab7c3e0a2ee00bb2f26.jpg" itemprop="image" />
    </a>
    
</div>


  <div class="content" itemprop="articleBody">
    <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p><code>HTML5</code> 为我们提供了一种通过 <code>File API</code> 规范与本地文件交互的标准方式。虽然也用过很多次了，但是一直不是很系统，今天参考别人的博客系统总结下。<br><code>File API</code>提供了多种文件访问的接口：</p>
<ol>
<li><code>File</code>，独立文件，提供文件的只读信息，比如名称，文件大小，<code>minetype</code>以及文件的引用</li>
<li><code>FileList</code>，文件对象的类数组序列，上传文件时选择多个文件或者拖拽上传拖拽多个文件的时候会有用到</li>
<li><code>Blob</code>，将文件分割为字节</li>
</ol>
<h3 id="检查你的浏览器是否支持-File-API"><a href="#检查你的浏览器是否支持-File-API" class="headerlink" title="检查你的浏览器是否支持 File API"></a>检查你的浏览器是否支持 File API</h3><p>Chrome 浏览器 6.0 和 <code>Firefox 3.6</code> 均支持处理本地文件所必需的 API。从 <code>Firefox 3.6.3</code> 起，就不支持 <code>File.slice()</code> 方法了。<br>检查方法如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 检查当前浏览器是否支持File API</span></span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">window</span>.File &amp;&amp; <span class="built_in">window</span>.FileReader &amp;&amp; <span class="built_in">window</span>.FileList &amp;&amp; <span class="built_in">window</span>.Blob) &#123;</span><br><span class="line">  <span class="comment">// something</span></span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  alert(<span class="string">'The File APIs are not fully supported in this browser.'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="选择文件"><a href="#选择文件" class="headerlink" title="选择文件"></a>选择文件</h3><h4 id="使用表单输入选择"><a href="#使用表单输入选择" class="headerlink" title="使用表单输入选择"></a>使用表单输入选择</h4><p>使用标准 <code>&lt;input type=&quot;file&quot;&gt;</code> 元素可以打开一个文件选择的弹窗，用户选择完文件之后 input 元素会得到一个 FileList 对象</p>
<p>如果想选择多个文件，可以声明 multiple 属性。如果想要选择特定格式的文件，可以声明 accept 属性，常用的有如下这些：</p>
<ol>
<li>选择<code>txt</code>文件，accept=”text/plain”</li>
<li>选择<code>excel</code>文件，accept=”application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”</li>
<li>选择<code>png</code>图片，accept=”image/png”</li>
</ol>
<p>这里有一份各种文件类型对应的 accept 字段的<a href="https://file.lantingshucheng.com/1544260274522.txt" target="_blank" rel="noopener">表格</a>，请收好~</p>
<figure class="highlight html"><figcaption><span>index.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">id</span>=<span class="string">"files"</span> <span class="attr">name</span>=<span class="string">"files[]"</span> <span class="attr">multiple</span> /&gt;</span> <span class="tag">&lt;<span class="name">output</span> <span class="attr">id</span>=<span class="string">"list"</span>&gt;</span><span class="tag">&lt;/<span class="name">output</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="built_in">document</span>.getElementById(<span class="string">'files'</span>).addEventListener(</span></span><br><span class="line"><span class="actionscript">    <span class="string">'change'</span>,</span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> files = evt.target.files; <span class="comment">// FileList 对象</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">      <span class="comment">// 罗列一些属性</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> output = [];</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, f; (f = files[i]); i++) &#123;</span></span><br><span class="line"><span class="javascript">        output.push(<span class="string">'&lt;li&gt;&lt;strong&gt;'</span>, <span class="built_in">escape</span>(f.name), <span class="string">'&lt;/strong&gt; ('</span>, f.type || <span class="string">'n/a'</span>, <span class="string">') - '</span>, f.size, <span class="string">' bytes, last modified: '</span>, f.lastModifiedDate.toLocaleDateString(), <span class="string">'&lt;/li&gt;'</span>);</span></span><br><span class="line">      &#125;</span><br><span class="line"><span class="javascript">      <span class="built_in">document</span>.getElementById(<span class="string">'list'</span>).innerHTML = <span class="string">'&lt;ul&gt;'</span> + output.join(<span class="string">''</span>) + <span class="string">'&lt;/ul&gt;'</span>;</span></span><br><span class="line">    &#125;,</span><br><span class="line"><span class="actionscript">    <span class="literal">false</span></span></span><br><span class="line">  );</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>点击这里查看<a href="https://codepen.io/Andyliwr/pen/LMPMEQ" target="_blank" rel="noopener">demo</a></p>
<h4 id="使用拖拽操作选择"><a href="#使用拖拽操作选择" class="headerlink" title="使用拖拽操作选择"></a>使用拖拽操作选择</h4><p>我们可以给元素添加 dragover 事件，如果拖动的是一个文件，就能在 event.dataTransfer.files 属性中拿到本次拖拽的图片</p>
<figure class="highlight js"><figcaption><span>index.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">"drop_zone"</span>&gt;Drop files here&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;output id="list"&gt;&lt;/</span>output&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleFileSelect</span>(<span class="params">evt</span>) </span>&#123;</span><br><span class="line">    evt.stopPropagation();</span><br><span class="line">    evt.preventDefault();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> files = evt.dataTransfer.files; <span class="comment">// FileList object.</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// files is a FileList of File objects. List some properties.</span></span><br><span class="line">    <span class="keyword">var</span> output = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, f; f = files[i]; i++) &#123;</span><br><span class="line">      output.push(<span class="string">'&lt;li&gt;&lt;strong&gt;'</span>, <span class="built_in">escape</span>(f.name), <span class="string">'&lt;/strong&gt; ('</span>, f.type || <span class="string">'n/a'</span>, <span class="string">') - '</span>,</span><br><span class="line">                  f.size, <span class="string">' bytes, last modified: '</span>,</span><br><span class="line">                  f.lastModifiedDate.toLocaleDateString(), <span class="string">'&lt;/li&gt;'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.getElementById(<span class="string">'list'</span>).innerHTML = <span class="string">'&lt;ul&gt;'</span> + output.join(<span class="string">''</span>) + <span class="string">'&lt;/ul&gt;'</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleDragOver</span>(<span class="params">evt</span>) </span>&#123;</span><br><span class="line">    evt.stopPropagation();</span><br><span class="line">    evt.preventDefault();</span><br><span class="line">    evt.dataTransfer.dropEffect = <span class="string">'copy'</span>; <span class="comment">// Explicitly show this is a copy.</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Setup the dnd listeners.</span></span><br><span class="line">  <span class="keyword">var</span> dropZone = <span class="built_in">document</span>.getElementById(<span class="string">'drop_zone'</span>);</span><br><span class="line">  dropZone.addEventListener(<span class="string">'dragover'</span>, handleDragOver, <span class="literal">false</span>);</span><br><span class="line">  dropZone.addEventListener(<span class="string">'drop'</span>, handleFileSelect, <span class="literal">false</span>);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>
<p>点击这里查看<a href="https://codepen.io/Andyliwr/pen/KbPbVV" target="_blank" rel="noopener">demo</a></p>
<h3 id="FileReader"><a href="#FileReader" class="headerlink" title="FileReader"></a>FileReader</h3><p>当获取了 <code>File</code> 引用后，实例化 <code>FileReader</code> 对象，以便将其内容读取到内存中。加载结束后，将触发读取程序的 <code>onload</code> 事件，而其 <code>result</code> 属性可用于访问文件数据。<br>FileReader 包括四个异步读取文件的选项：</p>
<ul>
<li>FileReader.readAsBinaryString(Blob|File) - result 属性将包含二进制字符串形式的 file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。</li>
<li>FileReader.readAsText(Blob|File, opt_encoding) - result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。</li>
<li>FileReader.readAsDataURL(Blob|File) - result 属性将包含编码为数据网址的 file/blob 数据。</li>
<li>FileReader.readAsArrayBuffer(Blob|File) - result 属性将包含 ArrayBuffer 对象形式的 file/blob 数据。</li>
</ul>
<p>对您的 FileReader 对象调用其中某一种读取方法后，可使用 <code>onloadstart</code>、<code>onprogress</code>、<code>onload</code>、<code>onabort</code>、<code>onerror</code> 和 <code>onloadend</code> 跟踪其进度。</p>
<p>下面的示例从用户选择的内容中过滤掉了图片，对文件调用 reader.readAsDataURL()，并通过将“src”属性设为数据网址来呈现缩略图。</p>
<figure class="highlight html"><figcaption><span>index.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.thumb</span> &#123;</span></span><br><span class="line">    height: 75px;</span><br><span class="line"><span class="css">    <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#000</span>;</span></span><br><span class="line">    margin: 10px 5px 0 0;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">id</span>=<span class="string">"files"</span> <span class="attr">name</span>=<span class="string">"files[]"</span> <span class="attr">multiple</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">output</span> <span class="attr">id</span>=<span class="string">"list"</span>&gt;</span><span class="tag">&lt;/<span class="name">output</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="function"><span class="keyword">function</span> <span class="title">handleFileSelect</span><span class="params">(evt)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> files = evt.target.files; <span class="comment">// FileList object</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// Loop through the FileList and render image files as thumbnails.</span></span></span><br><span class="line"><span class="actionscript">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, f; f = files[i]; i++) &#123;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">      <span class="comment">// Only process image files.</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">if</span> (!f.type.match(<span class="string">'image.*'</span>)) &#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">continue</span>;</span></span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> reader = <span class="keyword">new</span> FileReader();</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">      <span class="comment">// Closure to capture the file information.</span></span></span><br><span class="line"><span class="actionscript">      reader.onload = (<span class="function"><span class="keyword">function</span><span class="params">(theFile)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span> <span class="function"><span class="keyword">function</span><span class="params">(e)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">          <span class="comment">// Render thumbnail.</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> span = <span class="built_in">document</span>.createElement(<span class="string">'span'</span>);</span></span><br><span class="line"><span class="actionscript">          span.innerHTML = [<span class="string">'&lt;img class="thumb" src="'</span>, e.target.result,</span></span><br><span class="line"><span class="javascript">                            <span class="string">'" title="'</span>, <span class="built_in">escape</span>(theFile.name), <span class="string">'"/&gt;'</span>].join(<span class="string">''</span>);</span></span><br><span class="line"><span class="javascript">          <span class="built_in">document</span>.getElementById(<span class="string">'list'</span>).insertBefore(span, <span class="literal">null</span>);</span></span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;)(f);</span><br><span class="line"></span><br><span class="line"><span class="actionscript">      <span class="comment">// Read in the image file as a data URL.</span></span></span><br><span class="line">      reader.readAsDataURL(f);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="built_in">document</span>.getElementById(<span class="string">'files'</span>).addEventListener(<span class="string">'change'</span>, handleFileSelect, <span class="literal">false</span>);</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>点击这里查看<a href="https://codepen.io/Andyliwr/pen/dwojPx" target="_blank" rel="noopener">demo</a></p>
<h4 id="文件分割以及监控文件读取进度"><a href="#文件分割以及监控文件读取进度" class="headerlink" title="文件分割以及监控文件读取进度"></a>文件分割以及监控文件读取进度</h4><p>对于大文件的上传，可以使用File接口分割文件，然后分布上传到服务器，由服务器组件负责按正确顺序重建文件，此外使用onloadstart 和 onprogress 事件可用于监控读取进度，点击这里<a href="https://www.html5rocks.com/zh/tutorials/file/dndfiles/" target="_blank" rel="noopener">查看详情</a></p>
<h3 id="结束"><a href="#结束" class="headerlink" title="结束"></a>结束</h3><p>文章转载于 <a href="https://www.html5rocks.com/zh/tutorials/file/dndfiles/" target="_blank" rel="noopener">通过 File API 使用 JavaScript 读取文件</a><br>如果你有更好的建议或者困惑的地方，都可以发送邮件到我的邮箱 - <a href="andyliwr@outlook.com">andyliwr@outlook.com</a></p>

  </div>
  <div class="statement">
    <hr>  
    1. 如果本文帮到了您，不妨点一下右上角的”<i class="fas fa-share-alt"></i>“按钮。<br>
    2. 除非注明，本博文章均为原创，转载请以链接形式标明本文地址。<br>
    3. 如果你有任何疑问，欢迎发送邮件到我的邮箱<a href="mailto:andyliwr@outlook.com">andyliwr@outlook.com<br>
  </div>
</article>


    <div class="blog-post-comments">
        <div id="gitalk_thread">
            <noscript>加载评论需要在浏览器启用 JavaScript 脚本支持。</noscript>
        </div>
    </div>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/search/">搜索</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/others/">其他文章</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#前言"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#检查你的浏览器是否支持-File-API"><span class="toc-number">2.</span> <span class="toc-text">检查你的浏览器是否支持 File API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#选择文件"><span class="toc-number">3.</span> <span class="toc-text">选择文件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#使用表单输入选择"><span class="toc-number">3.1.</span> <span class="toc-text">使用表单输入选择</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#使用拖拽操作选择"><span class="toc-number">3.2.</span> <span class="toc-text">使用拖拽操作选择</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#FileReader"><span class="toc-number">4.</span> <span class="toc-text">FileReader</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#文件分割以及监控文件读取进度"><span class="toc-number">4.1.</span> <span class="toc-text">文件分割以及监控文件读取进度</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#结束"><span class="toc-number">5.</span> <span class="toc-text">结束</span></a></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=https://andyliwr.github.io/2018/12/08/html5_file_api/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&text=Html5 File API详解[转载]"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&is_video=false&description=Html5 File API详解[转载]"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=Html5 File API详解[转载]&body=Check out this article: https://andyliwr.github.io/2018/12/08/html5_file_api/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&title=Html5 File API详解[转载]"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=https://andyliwr.github.io/2018/12/08/html5_file_api/&name=Html5 File API详解[转载]&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> 菜单</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> 目录</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2020 Dikang Li
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a href="/search/">搜索</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/others/">其他文章</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

    </div>
</body>
</html>
<!-- styles -->
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
<link rel="stylesheet" href="/lib/justified-gallery/css/justifiedGallery.min.css">
<link rel="stylesheet" href="/lib/fancybox/jquery.fancybox.css">

<link rel="stylesheet" href="https://file.lantingshucheng.com/blog/v3/static/styles/gitalk.css">


<!-- jquery -->
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/justified-gallery/js/jquery.justifiedGallery.min.js"></script>
<script src="/lib/fancybox/jquery.fancybox.pack.js"></script>

<script type="text/javascript" src="https://file.lantingshucheng.com/blog/v3/static/scripts/md5.js"></script>
<script type="text/javascript" src="https://file.lantingshucheng.com/blog/v3/static/scripts/gitalk.min.js"></script>

<script src="/js/main.js"></script>
<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

    <script type="text/javascript">
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?7851ca7a86be957be994acb77639a5be";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

<!-- Disqus Comments -->


  <script type="text/javascript">
    window.onload = function(){
      if (window.location.href.indexOf('andyliwr.github.io') > -1) {
        var gitalk = new Gitalk({
          clientID: 'ad6f70df0c70d2b715f9',
          clientSecret: '40384bee244c1e17dd7c37733d21e9ef669e969c',
          repo: 'Andyliwr.github.io',
          owner: 'Andyliwr',
          admin: ['Andyliwr'],
          id: md5(location.pathname),
          distractionFreeMode: 'true'
        })
        gitalk.render('gitalk_thread')
      }
    }
  </script>


